{% macro hiding_control(class, hide=False) %}
<i class="fa fa-fw fa-chevron-right {{ class }} control_on_hidden" {% if not hide %}style="display: none"{% endif %}></i><i class="fa fa-fw fa-chevron-down {{ class }} control_on_showed" {% if hide %}style="display: none"{% endif %}></i>
{% endmacro %}

{% macro format_value(value) %}
  {% if value is defined and not None %}
    {% if '\n' in value|string %}
      <pre>{{ value }}</pre>
    {% else %}
      {{ value }}
    {% endif %}
  {% endif %}
{% endmacro %}

{% macro format_output(output, name, status, total, default_hide=False) %}
  {% if output %}

    <div class="panel panel-{{ status }} {% if default_hide %}hide_control{% endif %}">
      <div class="panel-heading"><h3>{{ hiding_control('hide_control', default_hide)|safe }} {{ name }} {{ output | length }} / {{ total }}</h3></div>
      <div class="list-group">
        {% for step_name, step in output|dict_sort_value_subkey('__run_num__') %}
          <a class="list-group-item list-group-item-{{ status }}">
            <h4> {{hiding_control('hide_control', True)|safe }} {{ step_name }}</h4>
            <ul class="sync-status-hidden">
              {% for k, v in step.items() %}

                  <li>{{ k }}:
                    {% if v is mapping %}
                    <ul>
                      {% for ck, cv in v.items() %}
                      <li> {{ ck }}: {{ format_value(cv) }}</li>
                      {% endfor %}
                    </ul>
                    {% else %}
                    {{ format_value(v) }}
                    {% endif %}
                  </li>
              {% endfor %}
            </ul>
          </a>
        {% endfor %}
      </div>
    </div>
  {% endif %}
{% endmacro %}

{% macro panel_jsontree(heading_title, content, hide=True, heading_level=3) %}
<div class="panel panel-default">
  <div class="panel-heading">
    <h{{ heading_level }}>{{hiding_control('hide_control', hide)|safe }} {{ heading_title }}</h{{ heading_level }}>
  </div>
  {% if content|is_string() %}
    <pre class="panel-body" {% if hide %}style="display: none"{% endif %}>{{ content }}</pre>
  {% else %}
    <div class="panel-body jsontree" {% if hide %}style="display: none"{% endif %}>{{ content|tojson|safe }}</div>
  {% endif %}
</div>
{% endmacro %}

{% macro panel_jsontree_js() %}
$("div.panel-heading i.hide_control").click(function(event) {
  $(this).parents("div.panel").first().find(".panel-body").toggle();
  $(this).parent().find("i.fa").toggle();
});
{% endmacro %}

{% macro render_trees() %}
$("div.jsontree").each(function() {
  var tree = JSONTree.create(JSON.parse($(this).text()));
  $(this).html(tree);
});
{% endmacro %}

{% set category_mapper = {'message': 'info', 'success': 'success',
                          'warning': 'warning', 'error': 'danger'} %}

{% macro print_flash_messages() %}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category_mapper.get(category, category) }}" role="alert">{{ message }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}
{% endmacro %}

{% macro percent(n, tot) -%}
{{ ((n / tot) * 100) }}
{%- endmacro %}

{% macro gradient_background(total, green, blue, yellow, red) -%}
background: linear-gradient(to right, #d8ffc9, #d8ffc9 {{ percent(green, total) }}%
{%- if blue -%}
,#d1f0ff {{ percent(green, total) }}%, #d1f0ff {{ percent(green + blue, total) }}%
{%- endif %}
{%- if yellow -%}
,#faebcc {{ percent(green + blue, total) }}%, #faebcc {{ percent(green + blue + yellow, total) }}%
{%- endif -%}
{%- if red -%}
,#ffd1d1 {{ percent(green + blue + yellow, total) }}%, #ffd1d1 {{ percent(green + blue + yellow + red, total) }}%
{%- endif -%}
);
{%- endmacro %}
